<template>
  <div class="category">
    <nav-bar class="category-bar">
      <div slot="center">分类</div>
    </nav-bar>
    <div class="content">
      <scroll class="sc-menu">
        <cate-menu :menu="category" @selectItem="selectItem" />
      </scroll>

      <scroll class="scroll">
        <cate-content :subcategory="subcategory" />
        <tab-control :titles="['综合', '新品', '销量']" @tabClick="tabClick" />
        <goods-list :goods="showGoods"/>
      </scroll>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import CateMenu from "./ChildComps/CateMenu";
import CateContent from "./ChildComps/CateContent";
import GoodsList from 'components/content/goods/GoodsList';

import TabControl from "components/content/tabControl/TabControl";

import Scroll from "components/common/scroll/Scroll";
import {
  _getCateGory,
  _getSubCategory,
  _getCategoryDetail,
} from "network/category";


export default {
  name: "Category",
  components: {
    NavBar,
    CateMenu,
    Scroll,
    CateContent,
    TabControl,
    GoodsList
    
  },
  data() {
    return {
      category: [],
      subcategory: [],
      currentIndex: 0,
      goods: {
        pop: [],
        new: [],
        sell: [],
      },
    };
  },
  created() {
    /**分类信息 */
    _getCateGory().then((res) => {
      this.category = res.data.category.list;
      // console.log(res);
    });

    this.getSubCategory(this.currentIndex);
    this.getSubCategoryDetail("pop");
    this.getSubCategoryDetail("new");
    this.getSubCategoryDetail("sell");
  },
  computed: {
    showGoods() {
      return this.goods[this.currentIndex]
    }
  },
  methods: {
    selectItem(index) {
      this.getSubCategory(index);
    },
    getSubCategory(currentIndex) {
      setTimeout(() => {
        this.currentIndex = currentIndex;
        let maitKey = this.category[this.currentIndex].maitKey;
        _getSubCategory(maitKey).then((res) => {
          // console.log(res);
          this.subcategory = res.data.list;
        });
      }, 200);
    },
    getSubCategoryDetail(type) {
      setTimeout(() => {
        let miniWallkey = this.category[this.currentIndex].miniWallkey
       _getCategoryDetail(miniWallkey,type).then(res => {
       console.log(res);
        this.goods[type] = res;
     })
      },1000);
    },
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
    },
  },
};
</script>

<style scoped>
.category {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.category-bar {
  background: var(--color-tint);
  font-size: 16px;
  color: #fff;
  position: relative;
  top: 0px;
  z-index: 1;
}
.content {
  display: flex;
  height: calc(100% - 44px - 49px);
}
.scroll {
  width: 75%;
}
.sc-menu {
  width: 25%;
}
</style>
